<template>
	<view class="flex fileList_box">
		<view v-for="(item, index) in fileList" :key="index" class="image_view" @click="clickItem(item)">
			<image mode="" :src="item.url"></image>
			<view class="text-name">{{item?.originalfilename || ''}}</view>
		</view>
	</view>
	<u-album ref="uAlbumRef" :urls="urls2"></u-album>
	<video-show :url="videoUrl" :show="showModal" @changeVideoShow="changeShowModal"></video-show>
</template>

<script setup lang="ts" name="UploadImageSSR">
import { nextTick, ref, toRefs, watch } from 'vue';
import VideoShow from '@/components/video-show.vue';
// import pdf from '@/static/image/Pdf.png';
/**
 * UploadImage 上传插件
 * @description 支持图片/视频等
 * @property {Array} list 回显图片 [{url: 'https://cdn.uviewui.com/uview/swiper/1.jpg'}]
 * @property {Boolean} multiple = [true | false] 是否支持多选
 * @property {Number} maxCount = 10 最大上传个数
 * @property {String} accept = [image | video | file...] 上传类型
 * @property {String} capture = [camera | album] 上传方式 文件|拍照
 * @property {String} camera = [back | front] 摄像头设置
 * @event {Function} fileChange fileList更新事件
 * @example <upload-image @fileChange="getImages" :list="umodel.images"></upload-image>
 */

const videoUrl = ref('');
const showModal = ref(false);
function changeShowModal(data: boolean) {
	showModal.value = data;
}

const emit = defineEmits(['fileChange']);

const props = defineProps({
	list: {
		type: Array,
		default() {
			return [];
		}
	},
	multiple: {
		type: Boolean,
		default: true
	},
	maxCount: {
		type: Number,
		default: 10
	},
	accept: {
		type: String,
		default: 'image'
	},
	capture: {
		type: [String, Array],
		default: 'camera'
	},
	camera: {
		type: String,
		default: 'back'
	},
	maxSize: {
		type: Number,
		default: Number.MAX_VALUE
	},
	keys: {
		type: Number,
		default: 1
	},
	isRead: {
		type: Boolean,
		default: false
	},
	// 上传统一文件夹名称
  folderName: {
	type: String,
	default: "test/info",
  },
});

const { isRead, keys, list, capture, camera, accept, multiple, maxCount, maxSize, folderName } = toRefs(props);

const urls2 = ref([]); 

function isImage(file) {
  const imageTypes = [
    "image/jpeg",
    "image/png",
    "image/gif",
    "image/bmp",
    "image/webp",
    "jpeg",
    "jpg",
    "png",
    "gif",
    "bmp",
    "webp",
  ];
  return imageTypes.includes(file?.fileType);
}

function isVideo(file) {
  const imageTypes = [
    "mp4",
    "MP4",
  ];
  return imageTypes.includes(file?.fileType);
}

const uploadApi = process.env.VITE_APP_UPLOAD_API;

// 预览url前缀
const upPreviewUrl = `${uploadApi}/system/fileCenter/preview/`;

const fileList = ref<any[]>([]);

// const realList = ref();
// watch(()=>fileList,(newVal)=>{
// 	const lists = JSON.parse(JSON.stringify(newVal.value))
// 	lists.forEach((item)=>{
// 		item.url = item.realUrl
// 		delete item.realUrl
// 	})
// 	realList.value = lists
// }, {
// 	deep: true
// })

watch(
  () => list,
  (newFile) => {
	  console.log('newFile', newFile)
    fileList.value = handleImageUrl(newFile.value);
  },
  {
    immediate: true,
  }
);

// 图片链接处理
function handleImageUrl(list1) {
	const list = JSON.parse(JSON.stringify(list1))
	list.forEach((item) => {
		item.realUrl = item.url;
		if(item.fileType === 'pdf') {
			console.log(item.url)
		}
		item.url = item.fileType === 'pdf'? '/static/image/Pdf.png':isVideo(item)?'/static/image/video3.png':isImage(item)?`${upPreviewUrl}${item.realUrl}`:'/static/image/text.png';
	});
	return list;
}

const uAlbumRef = ref();
function clickItem(item) {
	if (isVideo(item)) {
		videoUrl.value = `${upPreviewUrl}${item.realUrl}`;
		// videoUrl.value = `https://fc-transvideo.baidu.com/266c89ab498dc9e07215099831f9e928.mp4`;
		showModal.value = true;
	} else if (item.fileType === 'pdf') {
		const url = `${upPreviewUrl}${item.realUrl}`;
		uni.navigateTo({
			url: `/pages/demo/pdf/pdfView?url=${url}` //带参跳转
		});
	} else if (isImage(item)) {
		urls2.value = [`${upPreviewUrl}${item.realUrl}`]
		nextTick(()=>{
			uAlbumRef.value.onPreviewTap();
		})
	} else {
		uni.showToast({
			icon:'none',
			title: '请到pc端查看'
		})
	}
}

</script>

<style lang="scss" scoped>
	.fileList_box {
		display: flex;
		flex-wrap: wrap;
	}
	.u-album {
		opacity: 0;
		height: 0;
	}
	.image_view {
		width: 80px;
		display: inline-block;
		margin-right: 10px;
		margin-bottom: 10px;
		image {
			width: 80px;
			height: 80px;
			border: 1px solid #eee;
		}
		:deep(.text-name) {
			font-size: 14px;
			display: block;
			line-height: 20px;
			height: 40px;
			width: 100%;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2; /* 这里是超出几行省略 */
		}
	}
</style>